<table>
  <tr>
    <td id="leftpanel" valign="top">
        <div id="leftpaneldiv">
            <a href="javascript:void(0);" id="hidePanel"><img id="collapse" src="{$fvConfig->get('dir_web_root')}img/collapse.gif" width="15" height="15"></a>
            <div class="header" id="leftPanelHeader">Список страниц</div>
            <div id="leftpaneldata">
                <ul id="sortables">
                {section name=menuItem loop=$Menus}
                    {if $Menus[menuItem].parent_id && ($smarty.section.menuItem.index_prev != -1) && ($Menus[$smarty.section.menuItem.index_prev].parent_id == 0)}
                        <ul><li id="sortables_{$Menus[menuItem]->getPk()}">
                    {else}
                        <li id="sortables_{$Menus[menuItem]->getPk()}">
                    {/if}
                    <div style="float: right">
        <A 
           href="{$fvConfig->get('dir_web_root')}menus/?id={$Menus[menuItem]->getPk()}" 
        onclick="go('{$fvConfig->get('dir_web_root')}menus/?id={$Menus[menuItem]->getPk()}'); return false;"
        ><img src="{$fvConfig->get('dir_web_root')}img/edit_icon.png" title="редактировать" width="16" height="16"></a><a
           href="javascript: void(0);" 
        onclick="if (confirm('Вы действительно желаете удалить пункт меню. Все дочерние меню перенесутся в корень.')) go('{$fvConfig->get('dir_web_root')}menus/delete/?id={$Menus[menuItem]->getPk()}'); return false;"
        ><img src="{$fvConfig->get('dir_web_root')}img/delete_icon.png" title="удалить" width="16" height="16"></a>
                    </div><div class="{if $Menus[menuItem]->getPk() eq $smarty.request.id}selected{/if}">{$Menus[menuItem].name}</div><div style="clear: both;"></div>
                    
                    {if $Menus[menuItem].parent_id == 0 && $Menus[$smarty.section.menuItem.index_next].parent_id != 0}
                    {else}
                        </li>
                    {/if}
                    {if $Menus[menuItem].parent_id && ((!$smarty.section.menuItem.last && ($Menus[$smarty.section.menuItem.index_next].parent_id == 0)) || $smarty.section.menuItem.last)}
                        </li></ul></li>
                    {/if}
                {/section}
                </ul>
                {literal}
                <script>
                    Sortable.create("sortables", {
                        tree: true,
                        onChange: function () {
                            //alert(1);
                        },
                        onUpdate: function () {
                            new Ajax.Request("{/literal}{$fvConfig->get('dir_web_root')}menus/reorder/{literal}", {
                                parameters: Sortable.serialize("sortables")
                            });
                        }
                    });
                </script>
                {/literal}
                <div class="operation">
                    <a href="{$fvConfig->get('dir_web_root')}menus/" onclick="go('{$fvConfig->get('dir_web_root')}menus/'); return false;" class="add">добавить</a>
                </div>                
            </div>
        </div>
    </td>
    <td class="spacer">&nbsp;</td>
    <td id="datapanel">

<div class="form">
    <H1>{if $Menu->isNew()}Добавление пункта меню{else}Редактирование пункта меню '{$Menu->name}'{/if}</H1>
    <form method="post" action="/backend/menus/save/">
    <fieldset>
        <legend>Общая информация</legend>
        <table class="form">
        <tr><td style="width: 1px;">
        <label for="name">Название</label></td><td> <input type="text" id="name" name="mn[name]" value="{$Menu->name|escape}"/>
        </td></tr> <tr><td>
        <label for="url">URL на который ссылается пункт меню</label></td><td><input type="text" id="url" name="mn[url]" value="{$Menu->url|escape}" /> <br />
        </td></tr><tr><td>
        <label for="page_parent_id">Родительский пункт меню</label></td><td>
        {html_options name=mn[parent_id] id=parent_id options=$MenuManager->htmlSelect('name', "", "parent_id = 0 AND id <> ?", '', '', $Menu->getPk()) selected=$Menu->parent_id}
        </td></tr>
        </table>
    </fieldset> 
    
    <fieldset>
        <legend>Параметры</legend>
        <table class="form">
        <tr><td style="width: 1px;">
        <label for="type">тип пункта</label></td><td> 
            <select name="mn[type]" id="type">
                <option value="1" {if $Menu.type eq 1}selected="selected"{/if}>основной пункт меню</option>
                <option value="2" {if $Menu.type eq 2}selected="selected"{/if}>дополнительный пункт меню</option>
            </select>
        </td></tr><tr><td colspan="2">
            <input type="checkbox" name="mn[is_show]" value="1" id="is_show" {if $Menu.is_show || $Menu->isNew()}checked="true"{/if}><label for="is_show" class="checkbox">отображать пункт меню</label> <br />        </td></tr>
        </table>
    </fieldset> 

    <div class="buttonpanel">
        <input type="submit" name="save" value="Сохранить" class="button">
    </div>
    <input type="hidden" name="id" id="id" value="{$Menu->getPk()}" />
    <input type="hidden" name="mn[image]" value="{$Menu.image}" id="image">
    
    </form>
    <form method="post" enctype="multipart/form-data" target="upload_iframe" action="{$fvConfig->get('dir_web_root')}menus/uploadimage/">
    <fieldset>
        <legend>Изображение</legend>
        <table class="form">
        <tr><td style="width: 1px;">
        <label for="type">Изображение к пункту меню</label></td><td>
            <input type="file" name="image" style="width:500px">
        </td><td>
            <input type="submit" name="save" value="загрузить" class="button">
        </td></tr>
        </table>
        <iframe id="upload_iframe" name="upload_iframe" src="javascript:void(0);" style="display: block;"></iframe>
        
        <div id="preview_div" style="text-align: center; border: 0px solid red; {if !$Menu->hasFile('image', 'small')}display: none;{/if}">
            {if $Menu->hasFile('image', 'small')}
                <img id="preview" {$Menu->getImageSize('image', 'small')} style="border: 0px solid none;" src="{$Menu->getImageDir(true)}{$Menu->getImageName('image', 'small')}" /><br />
                <a href="javascript: void(0);" id="deleteImage" style="font-size: 12px; color: blue; text-decoration: underline;">удалить</a>
            {else}
                <img id="preview" width="{$fvConfig->get('images.small.width')}" style="border: 0px none;" src="" /><br />
                <a href="javascript: void(0);" id="deleteImage" style="font-size: 12px; color: blue; text-decoration: underline;">удалить</a>
            {/if} 
        </div>
    </fieldset> 
    </form>

</div>

    </td>
  </tr>
</table>

{literal}
<script>
    function moveLeftPanel (e) {
        if ($('leftpanel').getDimensions().width > 100) {
            $('leftpanel').morph('width: 20px;');
            $('leftPanelHeader').update("");
            $('leftpaneldata').hide();
            $('collapse').src = '{/literal}{$fvConfig->get('dir_web_root')}img/expand.gif{literal}';
        } else {
            $('leftpanel').morph('width: 300px;');
            $('collapse').src = '{/literal}{$fvConfig->get('dir_web_root')}img/collapse.gif{literal}';
            setTimeout("$('leftPanelHeader').update('Список страниц')", 1000);
            setTimeout("$('leftpaneldata').show()", 1000);
        }
    }
    
    function deleteImage() {
        if (confirm('Вы действительно хотите удалить изображение?')) {
            window.blockScreen();
	        new Ajax.Request('{/literal}{$fvConfig->get('dir_web_root')}menus/deleteImage/{literal}',{
	            parameters: {id: $F('id'), image: $F('image')},
	            onSuccess: function (transport, json) {
	                window.completeRequest(transport);
	                if (json && json.image) {
	                    
	                    $('image').value = json.image.split('/').slice(-1).join('');
	                    if ($('preview')) {
	                        $('preview').src = json.image;
	                        $('preview').width = json.width;
	                        $('preview').height = json.height;
	                    }
	                } else {
	                    $('preview_div').hide();
	                    $('image').value = '';
	                }
	            }
	        });
        }
    }
    
    $('deleteImage').observe('click', deleteImage);
    
    Object.extend(window, {
        updateImage: function (imageName, width, height) {          
            if ($('preview')) {
                $('preview').src = '{/literal}{$fvConfig->get('path.upload.web_tmp_dir')}{literal}' + imageName;
                $('preview').width = width;
                $('preview').height = height;
            }
            $('image').value = imageName;
            if (imageName != '')
                $('preview_div').show();
            else 
                $('preview_div').hide();
        }
    });

    
    $('hidePanel').observe('click', moveLeftPanel);
</script>
{/literal}